<template>
    <div class="photoinfo-container">
        <h3 class="title">{{ imgObj.title }}</h3>
        <div class="subtitle">
            <span>发表时间：{{ imgObj.add_time | dateFormat }}</span>
            <span>点击次数：{{ imgObj.click }}次</span>
        </div>
        <!-- 缩略图区域 -->
        <div class="thumbimg">
            <vue-preview :slides="thumblist"></vue-preview>
        </div>

        <div class="content" v-html="imgObj.content"></div>

        <comment-sub :id="imgid"></comment-sub>
    </div>
</template>

<script>
import { Toast } from "mint-ui"
// 使用 评论子组件 Comment.vue
import comment from "../subcomponents/comment.vue"

export default {
    data(){
        return {
            imgid:this.$route.params.imgId,    // 获取 图片分享 中传递过来的 图片id
            imgObj:{},     // 图片详情对象
            thumblist:[]   // 缩略图数组
        }
    },
    created() {
        this.getImageInfo();    // 调用获取图片详情数据
        this.getThumImages();   // 调用获取图片详情的缩略图
    },
    methods:{
        getImageInfo(){    // 根据 图片id 获取 图片详情 的方法
            this.$http.get("api/getimageInfo/" + this.imgid).then(result => {
                if(result.data.status === 0){
                    this.imgObj = result.data.message[0];
                }else{
                    Toast("获取失败");
                }
            })
        },
        getThumImages(){   // 根据 图片id 获取 缩略图 的方法
            this.$http.get("api/getthumimages/" + this.imgid).then(result => {
                if(result.data.status === 0){
                    // 循环每个图片数据，根据插件需要补全 宽高 等属性
                    result.data.message.forEach((item,index) => {
                        item.msrc = item.src;   // 小图及预览大图共用一个src图片
                        item.w = 600;
                        item.h = 400;
                        item.alt = "这是第" + (index+1) + "张图";
                    });
                    // 将完整图片数据保存到数组中
                    this.thumblist = result.data.message;
                }else{
                    Toast("获取失败");
                }
            })
        }
    },
    components:{
        "comment-sub":comment
    }
}
</script>

<style lang="scss">
.photoinfo-container{
    .title{
        font-size: 14px;
        text-align:center;
        padding: 0 8px;
        margin:15px 0;
        color:#159cec;
        letter-spacing:1px;
    }
    .subtitle{
        font-size:12px;
        display: flex;
        justify-content: space-between;
        padding:0 8px;
        border-bottom:1px solid #ccc;
    }
    .content{
        padding: 8px;
        font-size:12px;
        text-align:justify;
        line-height:26px;
        clear:both;
    }

    .thumbimg{
        .my-gallery{
            padding: 1%;
            overflow:hidden;
            figure{
                width: 31.3%;
                margin: 1%;
                float:left;
                img{
                    width:100%;
                    display:block;
                }
            }
        }
    }
}
</style>